import React, {createRef} from 'react'
import './signup.scss'
import {Button, Input, Tabs} from "antd";
// import {KeyOutlined, UserOutlined} from "_@ant-design_icons@4.6.2@@ant-design/icons";
import {KeyOutlined, UserOutlined} from "@ant-design/icons";
import {register} from "../../api/userApi";
import {getRefValue} from "../../utils/refUtils";
import {showWarningMsg} from "../../utils/antdUtils";

function SignUp(){

    const { TabPane } = Tabs;
    const username = React.createRef();
    const password = createRef();
    const password_confirm = createRef();
    const captcha = createRef();

    const tab_click = (key) => {
        console.log(key)
    }

    const back = () => {
        window.location.href = './login'
    }

    const submit = () => {
        if (getRefValue(password_confirm) === getRefValue(password)){
            const data = {
                username: getRefValue(username),
                password: getRefValue(password),
                captcha: getRefValue(captcha)
            }
            console.log(data["username"])
            register(data, data["captcha"]).then(() => {

            })
        } else {
            showWarningMsg("密码不一致！请重新输入")
        }

    }


    return(
        <div className={'container'}>
            <div className={'main'}>
                <div className={'image'}>
                    <div className={'title'}>
                        重庆市停车场管理系统
                    </div>
                </div>

                <div className={'panel'}>
                    <div className={'panel_tabs'}>
                        <Tabs defaultActiveKey="1" onChange={tab_click} centered={true} tabBarGutter={50}>
                            <TabPane  tab="新用户注册" key="1" animated={true}>
                                <div className={'account_way'}>
                                    <Input size="large" placeholder="用户名" prefix={<UserOutlined />} ref ={username}/>
                                    <br/>
                                    <br/>
                                    <Input.Password size="large" placeholder="密码" prefix={<KeyOutlined />} ref={password}/>
                                    <br/>
                                    <br/>
                                    <Input.Password size="large" placeholder="确认密码" prefix={<KeyOutlined />} ref={password_confirm}/>
                                    <br/>
                                    <br/>
                                    <div className={'code_area'}>
                                        <div className={'code_input'}>
                                            <Input size={'large'} placeholder={'验证码'} prefix={<KeyOutlined />} ref={captcha}/>
                                        </div>
                                        <div className={'code_image'}>

                                        </div>
                                    </div>

                                    <div className={'account_submit'} onClick={submit}>
                                        <Button type="primary">注册</Button>
                                    </div>

                                    <div className={'account_options'}>
                                        <div> </div>
                                        <div className={'forget'} style={{color:'black'}} onClick={back}>返回登录</div>
                                    </div>


                                </div>
                            </TabPane>
                        </Tabs>
                    </div>
                </div>
            </div>

            <div className={'footer'}>
                渝公网安备 50019002502240号
            </div>
        </div>
    )
}

export default SignUp